<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
		<meta name="format-detection" content="telephone=no">
		<title></title>
		<!--<link rel="stylesheet" href="frozen/css/frozen.css" />-->
		<style>
			.ui-border-t:active {
				background-color: rgba(255, 0, 0, 1);
			}
			
			.header-wrapper {
				height: 168px;
				position: relative;
				overflow: hidden;
				background: -webkit-radial-gradient(left top, circle, #d1f0d0, #c3edda 10%, #84c4d4 40%, #a1bbdf);
				background: -ms-radial-gradient(left top, circle, #d1f0d0, #c3edda 10%, #84c4d4 40%, #a1bbdf);
				background: radial-gradient(left top, circle, #d1f0d0, #c3edda 10%, #84c4d4 40%, #a1bbdf);
			}
			
			.header-inner {
				height: 100%;
				position: relative;
			}
			
			.dashboard {
				position: absolute;
				width: 150px;
				height: 150px;
				text-align: center;
				border-radius: 50%;
				border: 1px solid rgba(255, 255, 255, .2);
				background-color: rgba(255, 255, 255, .1);
				left: 50%;
				top: 50%;
				margin: -76px 0 0 -76px;
				z-index: 10;
				-webkit-background-size: 150px 150px;
				background-size: 150px 150px;
			}
			
			.number {
				margin-top: 38%;
				color: #fff;
				font-size: 34px;
				line-height: 1em;
				font-family: 'custom';
				font-weight: 700;
			}
			
			.waves {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 168px;
				z-index: 1;
				-webkit-transition: all 1s cubic-bezier(0.17, 0.89, 0.42, 1.89);
				transition: all 1s cubic-bezier(0.17, 0.89, 0.42, 1.89);
				-webkit-mask: center no-repeat;
				mask: center no-repeat;
				-webkit-mask-image: url(../img/mask.png);
				mask-image: url(../img/mask.png);
			}
			
			.waves .w1 {
				width: 800px;
				height: 30px;
				position: absolute;
				bottom: 8px;
				left: 50%;
				margin-left: -80px;
				background: url(../img/w1.png) no-repeat;
				-webkit-background-size: auto 30px;
				background-size: auto 30px;
				-webkit-animation: wave1move 8s linear infinite;
				animation: wave1move 8s linear infinite;
				z-index: 10;
			}
			
			.waves .w2 {
				width: 700px;
				height: 28px;
				position: absolute;
				bottom: 8px;
				left: 50%;
				margin-left: -70px;
				background: url(../img/w2.png) no-repeat;
				-webkit-background-size: auto 28px;
				background-size: auto 28px;
				-webkit-animation: wave2move 12s linear infinite;
				animation: wave2move 12s linear infinite;
				z-index: 1;
			}
			
			@-webkit-keyframes wave1move {
				0% {
					-webkit-transform: translate3d(0, 0, 0);
				}
				100% {
					-webkit-transform: translate3d(-365px, 0, 0);
				}
			}
			
			@-webkit-keyframes wave2move {
				0% {
					-webkit-transform: translate3d(0, 0, 0);
				}
				100% {
					-webkit-transform: translate3d(-333px, 0, 0);
				}
			}
			
			@keyframes wave1move {
				0% {
					-webkit-transform: translate3d(0, 0, 0);
					transform: translate3d(0, 0, 0);
				}
				100% {
					-webkit-transform: translate3d(-365px, 0, 0);
					transform: translate3d(-365px, 0, 0);
				}
			}
			
			@keyframes wave2move {
				0% {
					-webkit-transform: translate3d(0, 0, 0);
					transform: translate3d(0, 0, 0);
				}
				100% {
					-webkit-transform: translate3d(-333px, 0, 0);
					transform: translate3d(-333px, 0, 0);
				}
			}
		</style>
	</head>

	<body>
		<ul class="ui-list ui-list-text ui-list-active ui-list-cover ui-border-tb">
			<li class="ui-border-t">
				<p>加ui-list-active会带按压态</p>
			</li>
			<li class="ui-border-t">
				<p>加ui-list-cover通栏</p>
			</li>
		</ul>
		<header>
			<div class="header-wrapper">
				<div class="header-inner">
					<div class="dashboard">
						<div class="number">
							<span>03</span>:<span>10</span>:<span>00</span>
						</div>
						<div class="tip">剩余WiFi时长</div>
					</div>
					<div class="waves">
						<div class="w1"></div>
						<div class="w2"></div>
					</div>
				</div>
			</div>
		</header>
	</body>

</html>